<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>체크리스트</title>
	<link rel="stylesheet" type="text/css" href="../css/checkList.css" />
	<link href='http://fonts.googleapis.com/css?family=Yeseva+One&v2' rel='stylesheet' type='text/css'>
</head>
<body>

<h1>단말 체크리스트</h1>

<h2>HTML5 Semantic Tags</h2>
<div class="comment">지원하지 않는 경우에도 <a href="http://code.google.com/p/html5shiv/" target="_blank">html5 shiv</a>를 통해 사용가능</div>

<table class="compTable">
<tr>
	<th>Item</th>
	<th>현재</th>
</tr>
<tr>
	<td>header</td>
	<td class="s_tag"><header></header></td>
</tr>
<tr>
	<td>footer</td>
	<td class="s_tag"><footer></footer></td>
</tr>
<tr>
	<td>section</td>
	<td class="s_tag"><section></section></td>
</tr>
<tr>
	<td>article</td>
	<td class="s_tag"><article></article></td>
</tr>
<tr>
	<td>nav</td>
	<td class="s_tag"><nav></nav></td>
</tr>
<tr>
	<td>aside</td>
	<td class="s_tag"><aside></aside></td>
</tr>
<tr>
	<td>figure</td>
	<td class="s_tag"><figure></figure></td>
</tr>
<tr>
	<td>figcaption</td>
	<td class="s_tag"><figcaption></figcaption></td>
</tr>
<tr>
	<td>hgroup</td>
	<td class="s_tag"><hgroup></hgroup></td>
</tr>
<tr>
	<td>time</td>
	<td class="s_tag"><time></time></td>
</tr>
<tr>
	<td>mark</td>
	<td class="s_tag"><mark></mark></td>
</tr>
</table>


<!-- <meter>
<progress>
<audio>
<canvas>
<command>
<datalist>
<details>
<embed>
<keygen>
<output>
<rp>
<rt>
<ruby>
<source>
<summary>
<video>
<wbr> -->


<h2>Animated Gif vs CSS3 Animation</h2>

<table class="compTable">
<tr>
	<th>GIF</th>
	<th>CSS3</th>
</tr>
<tr>
	<td>
		<img src="../img/loading.gif" />
	</td>
	<td>
		<div class="spinner">
		  <div class="bar1"></div>
		  <div class="bar2"></div>
		  <div class="bar3"></div>
		  <div class="bar4"></div>
		  <div class="bar5"></div>
		  <div class="bar6"></div>
		  <div class="bar7"></div>
		  <div class="bar8"></div>
		  <div class="bar9"></div>
		  <div class="bar10"></div>
		  <div class="bar11"></div>
		  <div class="bar12"></div>
		</div>
	</td>
</tr>
</table>

<h2>CSS Check</h2>

<table class="compTable">
<tr>
	<th>Item</th>
	<th>현재</th>
	<th>현재단말화면</th>
	<th>적용시 기대화면</th>
	<th class="ie8">IE8</th>
	<th class="ch12">크롬12</th>
	<th class="ios43">iOS4.3</th>
	<th class="a23">A2.3</th>
</tr>
<tr>
	<td>a:active</td>
	<td class="a_active"></td>
	<td>
		<a class="eg_a_active">Active me!</a>
	</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td>div:active</td>
	<td class="div_active"></td>
	<td>
		<div class="eg_div_active">Active me!</div>
	</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td>a:active +  ontouchstart=""</td>
	<td class="a_active"></td>
	<td>
		<a class="eg_a_active" ontouchstart="">Active me!</a>
	</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td>div:active +  ontouchstart=""</td>
	<td class="div_active"></td>
	<td>
		<div class="eg_div_active" ontouchstart="">Active me!</div>
	</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td>Pseudo Element</td>
	<td class="pseudoelement"><span class="n">No</span></td>
	<td>
		<div class="eg_pseudoElement">Text</div>
	</td>
	<td class="x1"></td>
	<td>P</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>@font-face</td>
	<td class="fontface"><span class="y">Yes</span><span class="n">No</span></td>
	<td class="eg_webfont">Web Font Text</td>
	<td class="x2"></td>
	<td>P</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>background-size</td>
	<td class="backgroundsize"><span class="y">Yes</span><span class="n">No</span></td>
	<td class="eg_bgSize">BG Size</td>
	<td class="x3"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>border-image</td>
	<td class="borderimage"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_borderImage">Border Image</div>
	</td>
	<td class="x4"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>border-radius</td>
	<td class="borderradius"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_borderRadius">Border Radius</div>
	</td>
	<td class="x5"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>box-shadow</td>
	<td class="boxshadow"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_boxShadow">Box Shadow</div>
	</td>
	<td class="x6"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Flexible Box Model</td>
	<td class="flexbox"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_flexbox">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
	</td>
	<td class="x7"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
	<td>Multiple backgrounds</td>
	<td class="multiplebgs"><span class="y">Yes</span><span class="n">No</span></td>
	<td class="eg_multiBG"></td>
	<td class="x8"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>opacity</td>
	<td class="opacity"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_blue"></div>
		<div class="eg_red"></div>
	</td>
	<td class="x9"></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>rgba()</td>
	<td class="rgba"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_blue2"></div>
		<div class="eg_red2"></div>
	</td>
	<td class="x10"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>hsla()</td>
	<td class="hsla"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_blue3"></div>
		<div class="eg_red3"></div>
	</td>
	<td class="x11"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
	</tr>
<tr>
<tr>
	<td>text-shadow</td>
	<td class="textshadow"><span class="y">Yes</span><span class="n">No</span></td>
	<td class="eg_textShadow">Shadow</td>
	<td class="x12"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>CSS Animations</td>
	<td class="cssanimations"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_animation"></div>
	</td>
	<td class="x13">(색 변하며 좌우이동)</td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>CSS Columns</td>
	<td class="csscolumns"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_column">동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세. 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세. 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세.</div>
	</td>
	<td class="x14"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>CSS Gradients</td>
	<td class="cssgradients"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_gradient"></div>
	</td>
	<td class="x15"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>CSS Reflections</td>
	<td class="cssreflections"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<img src="../img/nate_20.png" class="eg_reflection" />
	</td>
	<td class="x16"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>CSS 2D Transforms</td>
	<td class="csstransforms"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_transform">hover me!</div>
	</td>
	<td class="x17"></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>CSS 3D Transforms</td>
	<td class="csstransforms3d"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_cube"></div> 
	</td>
	<td class="x18">(카드 돌듯 움직임)</td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td><span class="n">N</span></td>
</tr>
<tr>
	<td>CSS Transitions</td>
	<td class="csstransitions"><span class="y">Yes</span><span class="n">No</span></td>
	<td>
		<div class="eg_transition">click me!</div> 
	</td>
	<td class="x19">(클릭/터치시 색 변화)</td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
</table>






<h2>API Check</h2>

<table class="compTable">
<tr>
	<th>Item</th>
	<th>현재</th>
	<th>비고</th>
	<th class="ie8">IE8</th>
	<th class="ch12">크롬12</th>
	<th class="ios43">iOS4.3</th>
	<th class="a23">A2.3</th>
</tr><tr>
	<td>applicationCache</td>
	<td class="applicationcache"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Canvas</td>
	<td class="canvas"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Canvas Text</td>
	<td class="canvastext"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Drag and Drop</td>
	<td class="draganddrop"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>hashchange Event</td>
	<td class="hashchange"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>History Management</td>
	<td class="history"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>HTML5 Audio</td>
	<td class="audio"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>HTML5 Video</td>
	<td class="video"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>IndexedDB</td>
	<td class="indexeddb"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td><span class="n">N</span></td>
	<td><span class="n">N</span></td>
</tr>
<!-- <tr>
	<td>Input Attributes // autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, required, step"></td>
	<td><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td>Y</td>
</tr>
<tr>
	<td>Input Types // search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color"></td>
	<td><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td>Y</td>
</tr> -->
<tr>
<td>localStorage</td>
	<td class="localstorage"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Cross-window Messaging</td>
	<td class="postmessage"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>sessionStorage</td>
	<td class="sessionstorage"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Web Sockets</td>
	<td class="websockets"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td><span class="n">N</span></td>
</tr>
<tr>
	<td>Web SQL Database</td>
	<td class="websqldatabase"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Web Workers</td>
	<td class="webworkers"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td><span class="n">N</span></td>
	<td><span class="n">N</span></td>
</tr>
<tr>
	<td>Geolocation API</td>
	<td class="geolocation"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>Inline SVG</td>
	<td class="inlinesvg"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td><span class="n">N</span></td>
	<td><span class="n">N</span></td>
</tr>
<tr>
	<td>SMIL</td>
	<td class="smil"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td><span class="n">N</span></td>
</tr>
<tr>
	<td>SVG</td>
	<td class="svg"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td><span class="n">N</span></td>
</tr>
<tr>
	<td>SVG Clip paths</td>
	<td class="svgclippaths"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td><span class="n">N</span></td>
</tr>
<tr>
	<td>Touch Events</td>
	<td class="touch"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
</tr>
<tr>
	<td>WebGL</td>
	<td class="webgl"><span class="y">Yes</span><span class="n">No</span></td>
	<td></td>
	<td><span class="n">N</span></td>
	<td>Y</td>
	<td>Y</td>
	<td><span class="n">N</span></td>
</tr>
</table>


<script type="text/javascript" src="../js/modernizr-2.0.6.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

	$('.eg_transition').click(function() {
		$(this).toggleClass('toggle');
	});

});
</script>

</body>
</html>